<template>
  <div v-clickoutside="headleclose">
    <el-input v-model="Cakecomposition" style="width:200px" size="small" placeholder="请输入商品名称搜索"
      @input="handleserchDebounce(Cakecomposition)" @focus="goodsListShow = true"></el-input>
    <div v-show="goodsListShow" class="grouplist" v-loading="searchLoading" element-loading-text="加载中...">
      <div v-if="goodsList && goodsList.length > 0">
        <el-tabs tab-position="left" style="height: 300px;">
          <el-tab-pane style="height: 300px;overflow-y: auto;" v-for="(item, index) in goodsList" :key="index"
            :label="item.goodsName">
            <div class="specs-item" v-for="(child, index2) in item.list" :key="index2"
              @click="handleGoodsList(item.goodsName, child)" v-if="item.list">{{ child.specs }}</div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="nodata" v-else>
        <div class="mg-10">
          <img src="@/assets/image/groupnodata.png" />暂无数据
          <span>(请搜索其他蛋糕)</span>
        </div>
      </div>
      <div class="close">
        <i class="el-icon-error fz-24" @click="headleclose"></i>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getNameAndSpecsByName,
} from "@/api/commodityfiles";
import {debounce} from 'lodash';
import Clickoutside from 'element-ui/src/utils/clickoutside'

export default {
  directives: {
    Clickoutside
  },
  data() {
    return {
      Cakecomposition: "",
      goodsList: [],
      searchLoading: false,
      goodsListShow: false,
    };
  },
  methods: {
    handleserch(name) {
      if (!name) {
        return;
      }
      this.searchLoading = true;
      getNameAndSpecsByName({
        deptId: this.cityareaId,
        name: name,
      }).then((response) => {
        this.goodsList = response.data.data || [];
      }).finally(() => {
        this.searchLoading = false;
      })
    },
    handleGoodsList(name, item) {
      //添加蛋糕组成
      this.goodsListShow = false;
      this.$emit('select', {
        goodsName: name,
        ...item,
      })
    },
    headleclose() {
      this.goodsListShow = false;
    },
  },
  created() {
    var saberareaIds = JSON.parse(localStorage.getItem("saber-areaId"));
    this.cityareaId = saberareaIds["content"];
    this.handleserchDebounce = debounce(this.handleserch, 400)
  }
};
</script>
<style lang="scss" scoped>
::v-deep .grouplist {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 5px 0;
  position: absolute;
  width: 100%;
  height: 300px;
  z-index: 999;

  .el-tabs__item {
    padding: 0 10px！important;
  }

  .close {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .el-tabs__item.is-active {
    color: #fff;
    background: #409eff;
    text-align: center !important;
  }

  .el-tabs--left .el-tabs__header.is-left {
    width: 55% !important;
  }

  .el-tabs--left .el-tabs__item.is-left {
    text-align: center !important;
  }

  el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    z-index: 1;
  }
  
  .specs-item {
    margin: 5px 0;
    line-height:30px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }

  .nodata {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    img {
      width: 80px;
      display: block;
      margin: auto;
    }

    span {
      font-size: 12px;
    }
  }
}
</style>